<!-- 服务体验 -->
<template>
	<view class="">
		<view class="flex-bettwen padding30">
			<view class="" style="font-weight: bold;">店铺服务体验</view>
			<text class="fs26 color-gray">近30天</text>
		</view>
		<view class="br-line br16 padding20 margin30">
			<view class="charts-box">
				<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
			</view>
			<view class="center">
				<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-upward" class="price-color"></u-icon> <text
						class="price-color">0.17%</text>，高于<text class="price-color">98.50%</text> 同行 </view>
			</view>

			<view class="flex-bettwen m-t40 bg-white flex-wrap">
				<view class="bg-gray padding20 br16 m-b20 w-210 h-200">
					<view class="color-gray fs26">描述相符</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						4.86
					</view>
					<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding20 br16 m-b20 w-210 h-200">
					<view class="color-gray fs26">物流服务</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						4.86
					</view>
					<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="green-color"></u-icon>
						<text class="green-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding20 br16 m-b20 w-210 h-200">
					<view class="color-gray fs26">客服服务</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						4.56
					</view>
					<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
			</view>


			<view class="m-t40">
				<view class="fs26">已享有4项专属权益</view>

				<view class="flex-bettwen m-t40">
					<view class=" flex-column-center flex1">
						<view class="icon-box center">
							<image src="../../../static/images/baoguang.png" mode="" class="w-50 h-50"></image>
						</view>
						<view class="fs24 color-gray m-t20">新品增加曝光</view>
					</view>
					<view class="flex-column-center  flex1">
						<view class="icon-box">
							<image src="../../../static/images/toufang.png" mode="" class="w-50 h-50"></image>
						</view>
						<view class="fs24 color-gray m-t20">允许广告投放</view>
					</view>
					<view class="flex-column-center  flex1">
						<view class="icon-box">
							<image src="../../../static/images/tisheng.png" mode="" class="w-50 h-50"></image>
						</view>
						<view class="fs24 color-gray m-t20">商品权重提升</view>
					</view>
					<view class="flex-column-center  flex1">
						<view class="icon-box">
							<image src="../../../static/images/tuijian.png" mode="" class="w-50 h-50"></image>
						</view>
						<view class="fs24 color-gray m-t20">允许热门推荐</view>
					</view>
				</view>
			</view>
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "4.75",
						fontSize: 18,
						color: "#2fc25b",
						offsetY: 0
					},
					subtitle: {
						name: "综合体验分",
						fontSize: 12,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 6
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: 0.66
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 340rpx;
	}

	.icon-box {
		background: #e4f6fe;
		padding: 20rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		
	}
</style>